<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>分页</title>
	<style>
		ul,li,a{
			margin: 0;padding: 0;border: 0;text-decoration: none;list-style:none;
		}
		.hsl-page{
			display:inline-block;
		}
		.hsl-page li{
			float:left;
		}
		.hsl-page li>a,.hsl-page li>span{
			color:#333;padding: 0 15px;height:35px;line-height:35px;
			background-color:#fff;font-size:15px;
			box-sizing:border-box;display:inline-block;
			border:1px solid #e2e2e2;margin-left: -1px;
		}
		.hsl-page li>a.hsl-disabled{
			color: #d2d2d2;
    	cursor: not-allowed;
		}
		.hsl-page li>a:hover.hsl-disabled{
			color: #d2d2d2;
    	cursor: not-allowed;
    	background-color: #fff;
		}
		.hsl-page li>a:hover{
			color:#009688;
			background-color: #ededed;
    	border-color: #ededed;
		}
		.hsl-page li a.selected{
			background-color:#009688;
			color:#fff;border-color:#009688;
		}
		.hsl-page li:last-child{
			color:#999;padding: 0 15px;height:35px;line-height:35px;
			background-color:#fff;font-size:15px;
			box-sizing:border-box;display:inline-block;
		}
		.hsl-page-input{
			display: inline-block;
	    width: 40px;height: 30px;
	    line-height: 30px;
	    margin: 0 10px;padding: 0 3px;
	    text-align: center;
	    border: 1px solid #e2e2e2;
	    border-radius: 2px;
	    background-color: #fff;
	    box-sizing: border-box;
		}
		.hsl-page-btn{
			margin-left: 10px;padding: 0 10px;cursor: pointer;
			height: 30px;line-height: 30px;
	    border: 1px solid #e2e2e2;border-radius: 2px;
	    background-color: #fff;
	    box-sizing: border-box;
		}
		.hsl-page:after{
			content:"";display:block;clear:both;
		}
	</style>
</head>
<body>
	
	<ul class="hsl-page">
		<!-- <li><a href="#" id="first">首页</a></li>
		<li><a href="#" id="prev">上一页</a></li>
		<li><a href="#" class="page-jump">1</a></li>
		<li><a href="#" class="page-jump">2</a></li>
		<li><a href="#" class="page-jump">3</a></li>
		<li><a href="#" class="page-jump">4</a></li>
		<li><a href="#" class="page-jump">5</a></li>
		<li><a href="#" class="page-jump">6</a></li>
		<li><a href="#" id="next">下一页</a></li>
		<li><a href="#" id="footer">尾页</a></li>
		<li><span>共<strong>20</strong>页</span></li>
		<li>
			到第
			<input type="text" min="1" value="1" class="hsl-page-input">
			页
			<button type="button" class="hsl-page-btn">确定</button>
		</li> -->
	</ul>


	<script src="jquery-3.2.1.min.js"></script>
	<script>
		
		var pageNow = 1;  //当前页
		var pageNum = 5; //总页数
		var type = 7;

		//连续出现的页码总数
		var groups = 6;

		//将当前页码突出显示
		function isSelected(){
			for(let i=0;i<$(".page-jump").length;i++){
				if($(".page-jump").eq(i).html() == pageNow){
					$(".page-jump").removeClass("selected");
					$(".page-jump").eq(i).addClass("selected");
				}
			}
		}
		//根据当前页来判断是否给“首页，上一页，下一页，尾页”增加禁止样式
		function isDisabled(){
			if(pageNow == 1 && pageNum != 1){
				$("#first").addClass("hsl-disabled");
				$("#prev").addClass("hsl-disabled");
				$("#next").removeClass("hsl-disabled");
				$("#footer").removeClass("hsl-disabled");
			}
			else if(pageNow == pageNum && pageNum != 1){
				$("#first").removeClass("hsl-disabled");
				$("#prev").removeClass("hsl-disabled");
				$("#next").addClass("hsl-disabled");
				$("#footer").addClass("hsl-disabled");
			}
			else if(pageNow == pageNum == 1){
				$("#first").addClass("hsl-disabled");
				$("#prev").addClass("hsl-disabled");
				$("#next").addClass("hsl-disabled");
				$("#footer").addClass("hsl-disabled");
			}
			else{
				$("#first").removeClass("hsl-disabled");
				$("#prev").removeClass("hsl-disabled");
				$("#next").removeClass("hsl-disabled");
				$("#footer").removeClass("hsl-disabled");
			}
		}

		//当总页数小于等于连续出现的页码数时
		if(pageNum <= groups){
			let pageHtml = "";let allHtml = "";
			let frontHtml = `
			                <li><a href="/home/news/listpage?type=${type}&list=1" id="first">首页</a></li>
											<li><a href="/home/news/listpage?type=${type}&list=${pageNow-1}" id="prev">上一页</a></li>
			                `;
			let afterHtml = `
											<li><a href="/home/news/listpage?type=${type}&list=${pageNow+1}" id="next">下一页</a></li>
											<li><a href="/home/news/listpage?type=${type}&list=${pageNum}" id="footer">尾页</a></li>
											<li><span>共<strong>${pageNum}</strong>页</span></li>
											<li>
												到第
												<input id="pageNum" type="number" min="1" value="1" class="hsl-page-input">
												页
												<button id="pageJump" type="button" class="hsl-page-btn">确定</button>
											</li>
			                `;
			for(let i=1;i<(pageNum+1);i++){
				pageHtml += `<li><a href="/home/news/listpage?type=${type}&list=${i}" class="page-jump">${i}</a></li>`;
			}
			allHtml = frontHtml + pageHtml + afterHtml;
			$(".hsl-page").empty();$(".hsl-page").html(allHtml);
			isSelected();
			isDisabled();
		}
		//当总页数大于连续出现的页码数时
		else if(pageNum > groups){
			let pageHtml = "";let allHtml = "";
			let frontHtml = `
			                <li><a href="/home/news/listpage?type=${type}&list=1" id="first">首页</a></li>
											<li><a href="/home/news/listpage?type=${type}&list=${pageNow-1}" id="prev">上一页</a></li>
			                `;
			let afterHtml = `
											<li><a href="/home/news/listpage?type=${type}&list=${pageNow+1}" id="next">下一页</a></li>
											<li><a href="/home/news/listpage?type=${type}&list=${pageNum}" id="footer">尾页</a></li>
											<li><span>共<strong>${pageNum}</strong>页</span></li>
											<li>
												到第
												<input id="pageNum" type="number" min="1" value="1" class="hsl-page-input">
												页
												<button id="pageJump" type="button" class="hsl-page-btn">确定</button>
											</li>
			                `;

			//如果pageNow为1或2时                
			if(pageNow-2 <= 0){
				for(let i=1;i<(6+1);i++){
					pageHtml += `<li><a href="/home/news/listpage?type=${type}&list=${i}" class="page-jump">${i}</a></li>`;
				}
				allHtml = frontHtml + pageHtml + afterHtml;
				$(".hsl-page").empty();$(".hsl-page").html(allHtml);
				isSelected();
				isDisabled();
			}
			//如果pageNow大于等于3
			else if(pageNow >= 3){
				//如果pageNow+3 <= pageNum
				if(pageNow+3 <= pageNum){
					pageHtml = `
										<li><a href="/home/news/listpage?type=${type}&list=${pageNow-2}" class="page-jump">${pageNow-2}</a></li>
										<li><a href="/home/news/listpage?type=${type}&list=${pageNow-1}" class="page-jump">${pageNow-1}</a></li>
										<li><a href="/home/news/listpage?type=${type}&list=${pageNow}" class="page-jump">${pageNow}</a></li>
										<li><a href="/home/news/listpage?type=${type}&list=${pageNow+1}" class="page-jump">${pageNow+1}</a></li>
										<li><a href="/home/news/listpage?type=${type}&list=${pageNow+2}" class="page-jump">${pageNow+2}</a></li>
										<li><a href="/home/news/listpage?type=${type}&list=${pageNow+3}" class="page-jump">${pageNow+3}</a></li>
					           `;
					allHtml = frontHtml + pageHtml + afterHtml;
					$(".hsl-page").empty();$(".hsl-page").html(allHtml);
					isSelected();
					isDisabled();
				}
				//如果pageNow+3 > pageNum
				else if(pageNow+3 > pageNum){
					for(let i=(pageNum-5);i<(pageNum+1);i++){
						pageHtml += `<li><a href="/home/news/listpage?type=${type}&list=${i}" class="page-jump">${i}</a></li>`;
					}
					allHtml = frontHtml + pageHtml + afterHtml;
					$(".hsl-page").empty();$(".hsl-page").html(allHtml);
					isSelected();
					isDisabled();
				}
			}
		}

		
		$(".hsl-disabled").attr("href","javascript:;");
		
		$("#pageJump").click(function(){
			let num = $("#pageNum").val();
			if(num > pageNum){
				alert("请输入正确的页码！");
				pageNow = pageNum;
				$("#pageNum").val(pageNum);
			}else{
				pageNow = num;
				window.location.href=("/home/news/listpage?type="+type+"&list="+pageNow);
			}
		});


	</script>
</body>
</html>